<template>
  <div class="box">
    <div class="flRTopNvaImg">
      <div class="flRTopNvaTextBox">
        <div class="flRTopNvaTextT">心得体验</div>
        <div class="flRTopNvaTextC">面膜篇</div>
        <div class="flRTopNvaTextB">
          <a href="###">
            <span>查看更多</span>
            <img src="@/assets/zfc-img/扩展箭头.png" alt="" />
          </a>
        </div>
      </div>
    </div>
    <div class="flRCNvaIcon">
      <a href="###" class="flRCNvaIconItem" v-for="(v, k) in FlIconArr" :key="k + 'icon'">
        <img :src="v.imgUrl" alt="" />
        <span>{{ v.text }}</span>
      </a>
    </div>
    <div class="flBPlBox">
      <span class="flBPlBoxH1">热卖品类</span>
      <div class="flBPlBoxImgBox">
        <a
          href="###"
          class="flBPlBoxImgItem"
          v-for="(v, k) in flBPlBoxImgArr"
          :key="k + '品类'"
        >
          <img class="flBPlBoxImgItemImg" :src="v.imgUrl" alt="" />
          <span class="flBPlBoxImgItemText">{{ v.text }}</span>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "FlTabContentIndex",
  data() {
    return {
      FlIconArr: [
        {
          imgUrl: require("@/assets/zfc-img/icon/日icon图标.png"),
          text: "日本直邮",
          falg: false,
        },
        {
          imgUrl: require("@/assets/zfc-img/icon/美icon图标.png"),
          text: "美国直邮",
          falg: false,
        },
        {
          imgUrl: require("@/assets/zfc-img/icon/英icon图标.png"),
          text: "英国直邮",
          falg: false,
        },
        {
          imgUrl: require("@/assets/zfc-img/icon/澳icon图标.png"),
          text: "澳大利亚直邮",
          falg: false,
        },
        {
          imgUrl: require("@/assets/zfc-img/icon/中icon图标.png"),
          text: "中国直邮",
          falg: false,
        },
      ],
      flBPlBoxImgArr: [
        {
          imgUrl: require("@/assets/zfc-img/plImg/洁面护理.png"),
          text: "洁面护理",
          falg: false,
        },
        {
          imgUrl: require("@/assets/zfc-img/plImg/人气口红.png"),
          text: "人气口红",
          falg: false,
        },
        {
          imgUrl: require("@/assets/zfc-img/plImg/名牌包包.png"),
          text: "名牌包包",
          falg: false,
        },
        {
          imgUrl: require("@/assets/zfc-img/plImg/洁面护理.png"),
          text: "洁面护理",
          falg: false,
        },
        {
          imgUrl: require("@/assets/zfc-img/plImg/人气口红.png"),
          text: "人气口红",
          falg: false,
        },
        {
          imgUrl: require("@/assets/zfc-img/plImg/名牌包包.png"),
          text: "名牌包包",
          falg: false,
        },
      ],
    };
  },
  methods: {
    setFlLitemStyle(k) {
      this.flArr.forEach((v) => {
        v.falg = false;
      });
      this.flArr[k].falg = true;
    },
  },
};
</script>

<style scoped>
.box {
  width: 100%;
}
.flRTopNvaImg {
  width: 5rem;
  height: 2.33rem;
  margin: 0 auto;
  margin-top: 0.16rem;
  background: url("../../../../../assets/zfc-img/分类右侧导航图片.png") 0 0/5rem 2.33rem
    no-repeat;
  position: relative;
}
.flRTopNvaTextBox {
  width: 2.13rem;
  height: 1.37rem;
  background-color: #fdf4f4;
  position: absolute;
  top: 0.36rem;
  left: 0.22rem;
}
.flRTopNvaTextT {
  height: 0.24rem;
  line-height: 0.24rem;
  vertical-align: top;
  font-size: 0.24rem;
  color: #4c4c4c;
  text-align: center;
  margin-top: 0.16rem;
  margin-bottom: 0.11rem;
}
.flRTopNvaTextC {
  width: 1rem;
  height: 0.36rem;
  margin: 0 auto;
  margin-bottom: 0.17rem;
  text-align: center;
  line-height: 0.36rem;
  font-size: 0.18rem;
  color: #ffffff;
  background: url("../../../../../assets/zfc-img/分类右侧导航文本背景.png") 0 0/1rem
    0.36rem no-repeat;
}
.flRTopNvaTextB {
  height: 0.18rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.flRTopNvaTextB a {
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
}
.flRTopNvaTextB a span {
  line-height: 0.18rem;
  font-size: 0.18rem;
  color: #4c4c4c;
}
.flRTopNvaTextB a img {
  width: 0.08rem;
  height: 0.14rem;
  margin-left: 0.05rem;
}
.flRCNvaIcon {
  width: calc(1.7rem * 3);
  height: calc(1.6rem * 2);
  margin: 0 auto;
  margin-bottom: 0.2rem;
  display: flex;
  flex-wrap: wrap;
}
.flRCNvaIconItem {
  width: 1.7rem;
  height: 1.6rem;
  text-align: center;
  display: block;
  position: relative;
}
.flRCNvaIconItem img {
  display: block;
  margin: 0 auto;
  padding-top: 0.25rem;
}
.flRCNvaIconItem span {
  width: 100%;
  height: 0.28rem;
  line-height: 0.28rem;
  font-size: 0.28rem;
  color: #4c4c4c;
  text-align: center;
  position: absolute;
  bottom: 0.24rem;
  left: 0;
}
.flBPlBox {
  width: 5.2rem;
  margin: 0 auto;
  border-top: 0.01rem solid #cccccc;
}
.flBPlBoxH1 {
  height: 0.27rem;
  margin-top: 0.2rem;
  margin-left: 0.04rem;
  margin-bottom: 0.45rem;
  font-size: 0.28rem;
  color: #4c4c4c;
  line-height: 0.27rem;
  display: block;
}
.flBPlBoxImgBox {
  width: 100%;
  height: calc(1.8rem * 2);
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0.06rem;
}
.flBPlBoxImgItem {
  width: calc(100% / 3);
  height: 1.8rem;
  position: relative;
}
.flBPlBoxImgItemImg {
  display: block;
  margin: 0 auto;
}
.flBPlBoxImgItemText {
  width: 100%;
  height: 0.24rem;
  font-size: 0.24rem;
  line-height: 0.24rem;
  color: #4c4c4c;
  display: block;
  text-align: center;
  position: absolute;
  bottom: 0.37rem;
  left: 0;
}
</style>
